Highcharts এর মাধ্যমে আপনি xAxis এবং yAxis এর বিভিন্ন সেটিংস কাস্টমাইজ করতে পারেন। অ্যাক্সিস কাস্টমাইজেশনের মাধ্যমে আপনি চার্টের ডেটা প্রদর্শনের পদ্ধতি নিয়ন্ত্রণ করতে পারবেন, যেমন অ্যাক্সিসের শিরোনাম, স্কেল, লেবেল, রেঞ্জ, এবং আরো অনেক কিছু। এই কাস্টমাইজেশন আপনার চার্টের পেশাদারিত্ব বাড়াতে সাহায্য করে।

এখানে xAxis এবং yAxis কাস্টমাইজ করার কিছু সাধারণ পদ্ধতি দেয়া হলো।

ধাপ ১: xAxis এবং yAxis কাস্টমাইজেশন

আপনার chart.component.ts ফাইলে xAxis এবং yAxis এর কনফিগারেশন কাস্টমাইজ করতে হবে। এখানে একটি উদাহরণ দেয়া হলো যেখানে আমরা xAxis এবং yAxis কাস্টমাইজ করব:

import { Component } from '@angular/core';
import * as Highcharts from 'highcharts';

@Component({
  selector: 'app-chart',
  templateUrl: './chart.component.html',
  styleUrls: ['./chart.component.css']
})
export class ChartComponent {
  Highcharts = Highcharts;
  chartOptions = {
    chart: {
      type: 'line'  // 'line' চার্ট টাইপ
    },
    title: {
      text: 'Customized Axis Example'  // চার্টের শিরোনাম
    },
    xAxis: {
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],  // xAxis কাস্টম লেবেল
      title: {
        text: 'Months'  // xAxis এর শিরোনাম
      },
      labels: {
        style: {
          fontSize: '14px',
          fontWeight: 'bold'
        }
      },
      tickInterval: 1,  // xAxis এর টিকের দুরত্ব নির্ধারণ
      gridLineWidth: 2,  // xAxis এর গ্রিড লাইন এর প্রস্থ
    },
    yAxis: {
      title: {
        text: 'Values'  // yAxis এর শিরোনাম
      },
      labels: {
        format: '{value} units'  // yAxis এর লেবেল ফরম্যাট
      },
      min: 0,  // yAxis এর মিনিমাম মান
      max: 10,  // yAxis এর ম্যাক্সিমাম মান
      tickInterval: 2,  // yAxis এর টিকের দুরত্ব নির্ধারণ
      gridLineWidth: 1,  // yAxis এর গ্রিড লাইন এর প্রস্থ
      tickColor: '#ff0000',  // yAxis এর টিক মার্কের রঙ
    },
    series: [{
      name: 'Data Series',
      data: [1, 3, 2, 4, 5, 6, 7]  // ডেটা সিরিজ
    }]
  };
}

ধাপ ২: xAxis কাস্টমাইজেশন

xAxis হল চার্টের নিচের এক্স-অ্যাক্সিস, যা সাধারণত ক্যাটেগরি বা টাইম লাইন এর তথ্য প্রদর্শন করে। এটি কাস্টমাইজ করার জন্য আপনি বিভিন্ন অপশন ব্যবহার করতে পারেন:

• categories: এক্স-অ্যাক্সিসে যে ক্যাটেগরি বা মানগুলো দেখাতে চান তা নির্ধারণ করে।
• title: এক্স-অ্যাক্সিসের শিরোনাম সেট করা হয়।
• labels: লেবেলের স্টাইল বা ফন্ট কাস্টমাইজেশন করার জন্য ব্যবহৃত হয়।
• tickInterval: এক্স-অ্যাক্সিসে টিক মার্কের দুরত্ব সেট করতে ব্যবহৃত হয়।
• gridLineWidth: গ্রিড লাইন এর প্রস্থ কাস্টমাইজ করতে ব্যবহৃত হয়।

উদাহরণ: এখানে আমরা xAxis এর শিরোনাম ‘Months’ এবং ফন্ট সাইজ পরিবর্তন করেছি।

ধাপ ৩: yAxis কাস্টমাইজেশন

yAxis হল চার্টের বাম দিকের Vertical Axis। এটি ডেটার মান প্রদর্শন করে এবং বিভিন্ন কাস্টমাইজেশন অপশন সরবরাহ করে:

• title: yAxis এর শিরোনাম।
• labels: লেবেলের ফরম্যাট বা স্টাইল পরিবর্তন করতে ব্যবহৃত হয়।
• min এবং max: yAxis এর ন্যূনতম এবং সর্বোচ্চ মান কাস্টমাইজ করা হয়।
• tickInterval: yAxis এর টিকের দুরত্ব নির্ধারণ করা হয়।
• gridLineWidth: গ্রিড লাইন এর প্রস্থ সেট করা হয়।
• tickColor: টিক মার্কের রঙ কাস্টমাইজ করা হয়।

উদাহরণ: এখানে আমরা yAxis এর লেবেল ফরম্যাট {value} units দিয়ে পরিবর্তন করেছি এবং min ও max মান নির্ধারণ করেছি।

ধাপ ৪: টেমপ্লেটের জন্য কোড

chart.component.html ফাইলে Highcharts কম্পোনেন্ট ব্যবহার করে চার্টটি রেন্ডার করা হয়:

<div style="width: 100%; height: 400px;">
  <highcharts-chart 
    [Highcharts]="Highcharts"
    [options]="chartOptions">
  </highcharts-chart>
</div>

ধাপ ৫: অ্যাপ্লিকেশন রান করা

এখন অ্যাপ্লিকেশনটি চালু করতে ng serve কমান্ডটি ব্যবহার করুন এবং আপনার ব্রাউজারে গিয়ে http://localhost:4200/ তে গিয়ে কাস্টমাইজড এক্স এবং ওয়াই অ্যাক্সিস সহ চার্টটি দেখতে পারবেন।

ng serve

সারাংশ

Highcharts এর xAxis এবং yAxis কাস্টমাইজেশন আপনাকে চার্টের অ্যাক্সিসের শিরোনাম, লেবেল, স্কেল, গ্রিড লাইন এবং টিক মার্ক কাস্টমাইজ করার সুবিধা দেয়। এটি আপনার ডেটা ভিজ্যুয়ালাইজেশনের আরও স্পষ্টতা এবং পেশাদারিত্ব যোগ করে। আপনি বিভিন্ন প্রপার্টি ব্যবহার করে অ্যাক্সিসের অবস্থান, ফরম্যাট এবং শৈলী পরিবর্তন করতে পারবেন, যা আপনাকে ব্যবহারকারীর জন্য আরো অর্থবোধক ও আকর্ষণীয় চার্ট তৈরি করতে সহায়ক হবে।